<script setup>
import { getUserInfoService, updateUserInforService } from '@/api/user'
import { ref, reactive } from 'vue'

// 表单数据
const form = ref({
  username: '', // 示例数据
  nickname: '',
  email: '',
})

// 表单引用
const formRef = ref(null)

// 校验规则
const rules = reactive({
  nickname: [
    { required: true, message: '昵称不能为空', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '长度需在2到10个字符之间',
      trigger: 'blur',
    },
    {
      validator: (rule, value, callback) => {
        if (/\s/.test(value)) {
          callback(new Error('不能包含空格'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱格式',
      trigger: ['blur', 'change'],
    },
  ],
})

const getlist = async () => {
  const res = await getUserInfoService()
  form.value = res.data.data
}

getlist()

// 提交处理
const submitForm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      // 这里处理提交逻辑
      console.log('提交数据：', form)
      // 实际使用时替换为你的提交逻辑
      // axios.post('/api/submit', form).then(...)
      await updateUserInforService(form.value)
      ElMessage.success('修改成功')
    } else {
      console.log('表单校验未通过')
      return false
    }
  })
}
</script>
<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" style="max-width: 600px">
    <!-- 登录名称 -->
    <el-form-item label="登录名称" prop="username">
      <el-input v-model="form.username" disabled />
    </el-form-item>

    <!-- 用户昵称 -->
    <el-form-item label="用户昵称" prop="nickname">
      <el-input v-model="form.nickname" placeholder="请输入昵称" />
    </el-form-item>

    <!-- 用户邮箱 -->
    <el-form-item label="用户邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入邮箱" />
    </el-form-item>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交修改</el-button>
    </el-form-item>
  </el-form>
</template>
